<template>
	<view class="container" v-if="detail!=null">
		<!-- 详情图片 -->
		<view class="detailImage">
			<image :src="detail.img|getImage">
		</view>
		<!-- 详情基本信息 -->
		<view class="detailInfo">
			<view class="detailInfoName">
				<label>{{detail.goodsname}}</label>
			</view>
			<view class="detailInfoPrice">
				<label style="color: red;">￥ {{detail.price}}</label>
				<label style="font-size: 24rpx;color: #ccc;">(此价格不与套装优惠同时享受)</label>
			</view>			
		</view>
		
		<!-- 基本信息改变 -->
		<view class="changeInfo">
			<view class="youhui">
				<view>促销：<label class="manjian">满减</label><label class="dazhe">满2件9折；3件8折</label></view>
			</view>
			<!-- 数量加减 -->
			<view class="changeNum">
				<view class="num">购买数量</view>
				<view class="action">
				  <label class="jian" @click="reduce">-</label>
				  <label class="zhi">{{num}}</label>
				  <label  class="jia" @click="add">+</label>
				</view>
			</view>
			<!-- 商品属性 -->
			<view class="changeState">
				<view class="productStat">
					<label for="">商品属性</label>
				</view>
				<view class="productGuige" >
					<label>规格</label>
					<view class="threed3i1" v-for="(it,index) in detail.specsattr.split(',')" :key="index">
					{{it}}
					</view>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		 <view class="productDetail">
			<view class="productDetailTitle">商品详情</view>
			<rich-text :nodes="detail.description"></rich-text>
		</view>
		
		<view class="productEval">
			<view class="eval">商品评价</view>
			<view>
				<label class="evalUsername">小李白</label>
				<label class="evalUsertitle">效果很好，物流到位，下次继续来</label>					
				<view class="evalImage">
					<image src="../../static/detail/pingjia1.jpg"/>
					<image src="../../static/detail/pingjia2.jpg"/>
					<image src="../../static/detail/pingjia3.jpg"/>
						
				</view>
				<label class="evalTime">2020-01-13</label>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="foot">
			<button class="footbtn1" @click="cartAdd">加入购物车</button>
			<button class="footbtn2">立即购买</button>
		</view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				detail:null,			//商品详情
				num:1
			}
		},
		methods:{
			//添加购物车
			async cartAdd(){
				//获取uid和token
				let {uid,token}=uni.getStorageSync("userInfo")
				
				//添加到购物车
				let result =await this.$http({
					url:"api/cartadd",
					data:{uid,goodsid:this.detail.id,num:this.num},
					token:token
				}).catch(err=>console.error(err))
			
				if(result.data.code==500){
					uni.showToast({
						title:"请登录",
						icon:"none",
						image:"/static/detail/warn.png"
					})
					setTimeout(()=>{
						uni.reLaunch({
							url:"/pages/send/send"
						})
					},1500)
					return;
				}
				
				//提示用户
				uni.showToast({
					title:"成功添加",
					mask:true
				})
			},
			add(){
				this.num++
			},
			reduce(){
				this.num--
				if(this.num<=1){
					this.num=1;
				}
			}
			
		},
		async onLoad(e){
			let id=e.id;			//商品id
			//获取商品详情
			let result =await this.$http({url:"api/getgoodsinfo",data:{id}}).catch(err=>{
				console.error(err)
			})
			//渲染到页面
			this.detail=result.data.list[0]
		},
		// mounted(){
		// 	var id=this.$mp.query;
		// 	console.log(id)
		// }
	}
</script>
<style>
	@import url("../../common/css/details.css");
	
</style>
	
